<template>
      <div class="aside">
        <div class="statement">
            <el-row type="flex" justify="space-between" class="statement-list">
                <el-col :span="8">
                    <i class="iconfont iconweibiaoti-_huabanfuben" style="color:#409EFF;"></i>
                    <span>航协认证</span>
                </el-col>
                <el-col :span="8">
                    <i class="iconfont iconbaozheng" style="color:green;"></i>
                    <span>出行保证</span>
                </el-col>
                <el-col :span="8">
                    <i class="iconfont icondianhua" style="color:#409EFF;"></i>
                    <span>7x24</span>
                </el-col>
            </el-row>
            <p class="service-tel">
                免费客服电话：4006345678转2
            </p>
        </div>

        <div class="history">
            <h5>历史查询</h5>
                <router-link  v-for="(item, index) in history" :key="index" :to="
                `/plane/flight?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`
                ">
                    <el-row type="flex"
                        justify="space-between"
                        align="middle"
                        class="history-item">
                        <div class="air-info">
                            <div class="to-from">{{item.departCity}} - {{item.destCity}}</div>
                            <p>{{item.departDate}}</p>
                        </div>
                        <span>选择</span>
                        <i class="el-icon-circle-close" @click="removePassagerByIndex(index)"></i>
                    </el-row>
                </router-link>

        </div>
    </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      history: []
    }
  },
  mounted () {
    this.history = JSON.parse(localStorage.getItem('airs') || '[]')
  },
  methods: {
    removePassagerByIndex (index) {
      console.log(index)
      console.log(this.history[index])
    }
  }
}
</script>

<style lang="less" scoped>
.statement{
    border:1px #ddd solid;

    .statement-list{
        padding: 10px 0;
        > div{
            text-align: center;
            i{
                display: block;
                font-size: 40px;
            }
            span{
                font-size:12px;
            }
        }
    }
    .service-tel{
        height: 32px;
        line-height: 32px;
        padding:0 10px;
        background: #f6f6f6;
        font-size: 14px;
    }
}

.history{
    border:1px #ddd solid;
    padding:10px;
    margin-top:10px;

    h5{
        font-size: 16px;
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom:1px #eee solid;
    }

    .history-item{
        padding:10px 0;
        font-size: 14px;
        border-bottom: 1px #eee solid;
        position: relative;
        &:last-child{
            border:none;
        }
        .air-info{
            width: 100px;
            .to-from{
            margin-bottom: 5px;
            width: 100%;
            }
            p{
               font-size: 13px;
               color:#666;
               width: 100%;
            }
        }
        span{
            color:#fff;
            display: block;
            padding:2px 10px;
            background: orange;
            border-radius: 4px;
            font-size:15px;
            cursor: pointer;
            position: absolute;
            right: 45px;
        }
        .el-icon-circle-close{
            width: 15px;
            position: absolute;
            right: 0;
        }
    }
}
</style>
